<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>寄语录音</title>
<style type="text/css">
@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:24px; line-height:1.5em; color:#000;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}

.start_btn , .play_btn , .send_btn{ width:250px; height:60px; line-height:60px; margin:20px auto; text-align:center; border:#eee solid 2px; cursor:pointer;}
.start_btn_in , .stop_btn{ color:#f00; border:#f00 solid 2px;}
</style>
</head>

<body>
<br>
<input type="hidden" id="ordersn" value="{$_GET['ordersn']}">
<div class="start_btn"> 【按住不放即可录音】 </div>

<p class="translateVoice" style="text-align:center;">语音翻译：</p>

<div class="play_btn"> 【点我播放】 </div>

<div class="send_btn"> 【保存上传】 </div>


<script type="text/javascript" src="__PRIVATE__/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__PRIVATE__/js/layer/layer.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">
//微信配置数据
function wxconfig(obj){
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: obj.appId, // 必填，公众号的唯一标识
        timestamp:obj.timeStamp , // 必填，生成签名的时间戳
        nonceStr: obj.nonceStr, // 必填，生成签名的随机串
        signature: obj.signature,// 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','startRecord','stopRecord','onVoiceRecordEnd','playVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice','translateVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
}
//异步调起,配置微信js-sdk 所使用的接口数据
$.ajax({
    url:"{:U(MODULE_NAME.'/'.CONTROLLER_NAME.'/getWxConfig')}",
    type: 'POST',
    data : {'type':1,'url': encodeURIComponent(window.location.href.split('#')[0])},
    async: false,
    dataType: 'json',
    success:function(data){
        if (data.status){
            wxconfig(data.data);                  //微信配置数据
        }else{
            wx.error(function(res){
                alert("请联系客服,错误原因: " + res.errMsg);
            });
        }
    }
});

wx.ready(function(){
    //返回音频的本地ID
    var localId;
    //返回音频的服务器端ID
    var serverId;
    //录音识别文本
    var record_text;
    //录音计时,小于指定秒数(minTime = 10)则设置用户未录音
    var startTime , endTime , minTime = 2;


    //***********************************//


    //开始录音
    $('.start_btn').on('touchstart',function(e){
        e.preventDefault();
        var $this = $(this);
        $this.addClass('start_btn_in');

        //记录开始时间
        startTime = new Date().getTime();
        //开始录音
        wx.startRecord();
    });

    //***********************************//
    //停止录音接口
    $('.start_btn').on('touchend', function(e){
        e.preventDefault();
        var $this = $(this);
        $this.removeClass('start_btn_in');

        //停止录音接口
        wx.stopRecord({
            success: function (res) {
                endTime = new Date().getTime();
                alert((endTime - startTime) / 1000);
                if((endTime - startTime) / 1000 < minTime){
                    localId = '';
                    alert('录音少于' + minTime +  '秒，录音失败，请重新录音');
                }else{
                    localId = res.localId;
                    //语音识别
                    wx.translateVoice({
                        localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            $(".translateVoice").html("语音翻译："+res.translateResult);
                            record_text = res.translateResult;
                        }
                    });
                }
            }
        });

    });
    //监听录音自动停止接口
    wx.onVoiceRecordEnd({
        //录音时间超过一分钟没有停止的时候会执行 complete 回调
        complete: function (res) {
            localId = res.localId;

            $('.start_btn').removeClass('start_btn_in');
        }
    });


    //***********************************//


    $('.play_btn').on('click',function(){
        if(!localId){
            alert('您还未录音，请录音后再点击播放');
            return;
        }
        var $this = $(this);
        if($this.hasClass('stop_btn')){
            $(this).removeClass('stop_btn').text('点我播放');

    //      //暂停播放接口
    //      wx.pauseVoice({
    //          //需要暂停的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
    //          localId: localId
    //      });

            //停止播放接口
            wx.stopVoice({
                //需要停止的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
                localId: localId
            });
        }else{
            $this.addClass('stop_btn').text('点我停止');

            //播放语音接口
            wx.playVoice({
                //需要播放的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
                localId: localId
            });
        }
    });
    //监听语音播放完毕接口
    wx.onVoicePlayEnd({
        //需要下载的音频的服务器端ID，由uploadVoice接口获得
        localId: localId,
        success: function (res) {
            $('.play_btn').removeClass('stop_btn').text('点我播放');

            //返回音频的本地ID
            //localId = res.localId;
        }
    });


    //***********************************//


    //上传语音接口
    $('.send_btn').on('click',function(){
        if(!localId){
            alert('您还未录音，请录音后再保存');
            return;
        }

        //上传语音接口
        wx.uploadVoice({
            //需要上传的音频的本地ID，由 stopRecord 或 onVoiceRecordEnd 接口获得
            localId: localId,
            //默认为1，显示进度提示
            isShowProgressTips: 1,
            success: function (res) {
                //返回音频的服务器端ID
                serverId = res.serverId;
                $.ajax({
                    url:"{:U(MODULE_NAME.'/'.CONTROLLER_NAME.'/saveRecord')}",
                    type: 'POST',
                    data : {'serverId':serverId,ordersn:$("#ordersn").val(),record_text:encodeURIComponent(record_text)},
                    async: false,
                    dataType: 'json',
                    success:function(data){
                        layer.open({
                            content: data.msg
                            ,skin: 'msg'
                            ,style: 'font-size:1.2em;'
                            ,time: 1.5
                            ,end: function () {
                                window.location.href = data.url;
                            }
                        });
                    }
                });

            }
        });


    });

});

</script>
</body>
</html>
